<template>
  <div>
    <TabsView />
    <span style="font-size: 25px; font-weight: bold; color: #fb6"
      >已维修列表</span
    >
    <el-divider></el-divider>
    <el-table
      :data="
        tableData
          ? tableData.slice(
              (currentPage - 1) * pagesize,
              currentPage * pagesize
            )
          : []
      "
      style="width: 100%"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="ID" sortable width="80">
        <template slot-scope="scope"
          ><el-tag>{{ scope.row.id }}</el-tag></template
        >
      </el-table-column>
      <el-table-column prop="createTime" label="提交时间"> </el-table-column>
      <el-table-column prop="ownName" label="房主姓名"> </el-table-column>
      <el-table-column prop="houseNum" label="房屋编号"> </el-table-column>
      <el-table-column prop="repairStatus" label="维修状况">
        <template slot-scope="scope"
          ><el-tag :type="scope.row.repairStatus == 1 ? 'danger' : 'success'">{{
            scope.row.repairStatus == 1 ? "未维修" : "已维修"
          }}</el-tag></template
        >
      </el-table-column>
      <el-table-column prop="repairMsg" label="维修内容"> </el-table-column>
      <el-table-column prop="ownPhone" label="联系电话"> </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <el-button type="danger" @click="delweixiu(scope.row)" plain
            >删除</el-button
          >
        </template>
      </el-table-column>
      <el-table-column align="right">
        <template slot="header" slot-scope="{}">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入id搜索"
            @change="searchfun()"
            clearable
          />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[4, 8, 12, 16]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
    >
    </el-pagination>
  </div>
</template>

<script>
import { weixiu, find, finshweixiu } from "../../apis/pm/link.js";
import TabsView from "./TabsView.vue";

export default {
  components: { TabsView },
  mounted() {
    weixiu().then((ok) => {
      console.log(ok);
      // this.tableData = ok.data.data;
      // this.arr = ok.data.length;
      console.log(this.arr);
      ok.data.data.forEach((item) => {
        if (item.repairStatus == 0) {
          this.tableData.push(item);
        }
      });
    });
  },
  data() {
    return {
      tableData: [],
      arr: "",
      // 搜索后的列表
      // 默认显示第几页
      currentPage: 1,
      pagesize: 8,
      search: "",
    };
  },
  methods: {
    // 每页显示的条数
    handleSizeChange(pagesize) {
      this.pagesize = pagesize;
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    delweixiu(row) {
      finshweixiu(row.id).then((ok) => {
        console.log(ok,"11111");
         setTimeout(() => {
            this.$router.go(0);
          }, 1000);
          if (ok.data.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          }
        weixiu().then((ok) => {
          ok.data.data.forEach((item) => {
            if (item.repairStatus == 0) {
              // for (var i = 0; i < item.length; i++) {
                // if (item.indexOf(ok.data.data[i]) == -1) {
                  this.tableData.push(item);
                // }
              // }
            }
          });
        });
      });
    },
    searchfun() {
      console.log(this.search);
      find(this.search)
        .then((ok) => {
          console.log(ok);
          this.tableData = ok.data.data;
        })
        .catch(() => {
          alert("查找失败");
        });
      if (this.search == "") {
        weixiu().then((ok) => {
          console.log(ok);
          this.tableData = ok.data.data;
          // this.arr = ok.data.length;
          console.log(this.arr);
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.ddy {
  display: flex;
  flex-wrap: wrap;
  .srk {
    width: 260px;
    height: 20px;
  }
}
</style>
